<script setup>
import { ref , reactive} from 'vue';
import qs from 'qs'
import { useUserStore  } from '../stores/user'
import articleMenu from "./articleMenu.vue"
import { useRouter } from 'vue-router'
import {EditPen} from '@element-plus/icons-vue'
import article from "../api/getArticle.js"
import getUser  from "../api/getuser.js"
import getCarousel from '../api/getCarousel.js'
const carousels = ref({})
const use = useRouter();
let userInform = useUserStore();

getCarousel().then((res)=>{
    if(res.status == 200)
    {
      carousels.value = res.data
    }
  })

const createArt = () => {
    use.push("articleCreate")
}
const loading = ref(true);
setTimeout(() => {
        loading.value = false ;
    }, 2000);
    try{
        if(userInform.userId === ""){
        getUser({
        }).then(function (response) {
        if(response.status == 200 && response.data.userId!=undefined)
        {
            loading.value = false ;
            userInform.userId = response.data.userId ;
            userInform.username = response.data.userName ;
            userInform.image = response.data.imageId;
            userInform.article =  response.data.articleId ;
        }
        else {
            localStorage.removeItem("jwttoken");
            localStorage.removeItem("userId");
        }
        })
        }
    }
    catch(error)
    {
        loading.value = false ;
        console.error(error);
    }
</script>

<template>
<div v-if="loading"><load/></div>    
<div v-else>
    <el-container>
    <el-header style="width: 100%;">
        <Header></Header>
    </el-header>
    <el-main style="height: 120vh;">
    <el-carousel height="49.5vh" direction="vertical" :autoplay="true" style="width: 74vw;margin-top: 50px;margin-left: 12%;">
        <el-carousel-item v-for="item in carousels" style="width: 100%; height: 100%;" :key="item">
        <a style="width: 100%; height: 100%;" :href="item.link">
        <img v-if="item.imageUrl != ''" :src="item.imageUrl" style="object-fit:cover;width: 100%; height: 100%;"/>
        <ImageShow v-else style="object-fit:cover;width: 100%; height: 100%;" :value="item.imageId"></ImageShow>
        </a>
        <div class="title_Box"></div>
        </el-carousel-item>
    </el-carousel>  
    <div style="margin-top: 2rem; width: 84%; position: relative; left: 7%;  margin-bottom: 1rem; height: 30vh;">
      <articleMenu></articleMenu>
    </div>
</el-main>
    <el-footer><Footer></Footer></el-footer>
    </el-container>
    <div class="unit-box">
        <div class="button-box" @click="createArt" > <el-icon><EditPen /></el-icon> </div>
    </div>
</div>
    

</template>

<style>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 40vh;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.unit-box{
    position: fixed;
    bottom: 20%;
    right: 5%;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #f4e5a2;
    padding: 1vh;
    z-index: 9999;
    border-radius: 50%;
}

.unit-box:hover{
    background: #ec7d7d;
    animation: gradientAnimation 2s ;
}

.button-box{
    display: flex;
    align-items: center; /* 将元素垂直居中 */
    justify-content: center; /* 将元素水平居中 */
    left: 0%;
    top: 6%;
    width: 100%;
    height: 2vw;
}

@keyframes gradientAnimation {
  0% {
    background-size: 0% 0%;
  }
  100% {
    background-size: 100% 100%;
  }
}
</style>